<template>
     <SdyHander title="啥都有">
          <template #left><van-icon class="cate-icon" name="wap-nav" /></template>
          
          <template #title>
               <van-search @focus="inSearchHandler" shape="round" background="#c72418" placeholder="请输入搜索关键词" /></template>
               <template #right>
      <van-image v-if="isLogin" :src="avatar">已登录</van-image>
      <router-link v-else to="/login">登录</router-link>
     </template>
     </SdyHander>
     <!-- 轮播图 -->
     <SdyHomeBanner />
     <!-- 分类导航列表 -->
     <SdyHomeNavList />
     <!-- 秒杀列表 -->
     <SdyHomeHot />
      <!-- 商品列表 -->
     <SdyHomeGoodsList />
     
</template> 
<script setup lang="ts">
//导入组件使用
import SdyHomeBanner from './components/SdyHomeBanner.vue';
import SdyHomeNavList from './components/SdyHomeNavList.vue';
import SdyHomeHot from './components/SdyHomeHot.vue';
import SdyHomeGoodsList from './components/SdyHomeGoodsList.vue'
import { useRouter , type Router} from "vue-router";
import { ref, onMounted } from 'vue'
import { getUserInfoApi } from '@/api/users';
//拿到编程式导航的路由控制器
const $router:Router = useRouter()



//点击搜索进入到search路由
const inSearchHandler = ()=>{
     // console.log($router);
     $router.push('/search')        
}
//逻辑
//登录按钮应该显示什么
//如果你登录过，我应该实现昵称
//如果你没有登录，显示登录按钮

//0.准备一个 变量，表示是否登录过
 const isLogin = ref<boolean>(false)
//准备一个变量表示用户名

const  avatar= ref<string>('') 
 
 //1.验证token
   const testToken = async () =>{
     //1-1 .  从localStorage 内拿到token 和  user_id
     //如果没有，说明没有登录过
     const token = window.localStorage.getItem('token')
     const user_id = window.localStorage.getItem('user_id')
    if(!token ||!user_id){
               return
               isLogin.value = false
          }
           // 如果有，说明你曾经登陆过（不能保证是否过期，不能保证是否伪造）
          //1-2 ,根据 id  和token  去请求用户详细信息
          const res = await getUserInfoApi(user_id)
          console.log(res);
     //判断结果
     //10019
     //判断结果
     //表示可以继续
     if(((res as unknown) as { code:string}).code === '10019'){
          isLogin.value = false
          return

     }
     //表示登录过  
     isLogin.value = true
     avatar.value = res.data.avatar
     console.log(res);
     
          
   }
onMounted(()=>{
     testToken()
})
</script>
<style scoped lang="scss">
@import '@/styles/variable.scss';

.cate-icon {
     font-size: 26px;
     color: orange;
}


.van-search {
     height: 46px;
}
</style>